<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <div id="myGue">
        {{msg}}
    </div>
    <script src="./uuidv4.js"></script>
    <script src="./jquery-3.3.1.js"></script>
    <script>
        function Gue (gueCfg) {
            this.$el = $(gueCfg.el);
            this.data = { };
            for (key in gueCfg.data) {
                Object.defineProperty(this.data, "_" + key, {
                    configurable: false,
                    enumerable: false,
                    writable: true,
                    value: gueCfg.data[key]
                });
                Object.defineProperty(this.data, key, {
                    configurable: false,
                    enumerable: true,
                    get: () => {
                        return this.data["_" + key];
                    },
                    set: (value) => {

                        this.$el.find("*[text^='{{']");

                        alert(value);
                        this.data["_" + key] = value;
                    }
                });
            }
        }

        let myGue = new Gue({
            el: "#myGue",
            data: {
                msg: "你好，世界"
            }
        });

        console.log(myGue);
        console.log(uuidv4());


        // let obj = {
        //     _text: ""
        // };
        // Object.defineProperty(obj, "text", {
        //     configurable: true,
        //     enumerable: true,
        //     get: () => {
        //         return this._text;
        //     },
        //     set: (value) => {
        //         this._text = value;
        //         document.getElementById("b").innerText = this._text;
        //     }
        // });
        // setInterval(() => {
        //     obj.text = (new Date()).toLocaleTimeString();
        // }, 1000);
    </script>
</body>
</html>